<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon" />
    <meta
      name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <link rel="stylesheet" href="css/index_wzt.css" />
    <script src="js/zepto.js"></script>
    <title>快捷找房首页</title>
  </head>

  <body>
    <div class="content">
      <!-- 顶部app -->
      <div class="top-app">
        <div class="logo"><img src="./img/logo.ico" alt="" style="width: .6rem;position: relative;top: -10%;left: 30%;"></div>
        <div class="title">快捷找房APP</div>
        <div class="top-btn">立即打开</div>
      </div>
      <!-- 搜索框 -->
      <div class="search-box">
        <div class="lj-track">
          <div class="search-city" id="city">
            合肥
            <span class="arrow"></span>
          </div>
        </div>
        <div class="lj-track search-input">
          <span class="search-icon"></span>
          <input type="text" class="input" placeholder="你想住哪里？" />
        </div>
      </div>
      <!-- 功能模块 -->
      <div class="home-hot-menu">
        <ul class="home-ul">
          <li>
            <a href="ershoufang_lcz.html">
              <div class="li-img">
                <img src="img/top-img/t1.png" alt="" />
              </div>
              <div class="li-txt">
                <span>二手房</span>
              </div>
            </a>
          </li>
          <li>
            <a href="xinfang_lcz.html">
              <div class="li-img">
                <img src="img/top-img/t2.png" alt="" />
              </div>
              <div class="li-txt">
                <span>新房</span>
              </div>
            </a>
          </li>
          <li>
            <a href="zufang_lcz.html">
              <div class="li-img">
                <img src="img/top-img/t3.png" alt="" />
              </div>
              <div class="li-txt">
                <span>租房</span>
              </div>
            </a>
          </li>
          <li>
            <a href="overseas.html">
              <div class="li-img">
                <img src="img/top-img/t5.png" alt="" />
              </div>
              <div class="li-txt">
                <span>海外</span>
              </div>
            </a>
          </li>
          <li>
            <a href="maifang_lcz.html">
              <div class="li-img">
                <img src="img/top-img/t4.png" alt="" />
              </div>
              <div class="li-txt">
                <span>卖房</span>
              </div>
            </a>
          </li>
        </ul>
        <ul class="home-ul">
          <li>
            <a href="zhaoxiaoqu_hjx.html">
              <div class="li-img2">
                <img src="img/top-img/t7.png" alt="" />
              </div>
              <div class="li-txt">
                <span>找小区</span>
              </div>
            </a>
          </li>
          <li>
            <a href="zhaojingjiren_hjx.html">
              <div class="li-img2">
                <img src="img/top-img/t9.png" alt="" />
              </div>
              <div class="li-txt">
                <span>找经纪人</span>
              </div>
            </a>
          </li>
          <li>
            <a href="##">
              <div class="li-img2">
                <img src="img/top-img/t6.png" alt="" />
              </div>
              <div class="li-txt">
                <span>问答</span>
              </div>
            </a>
          </li>

          <li>
            <a href="baike_hjx.html">
              <div class="li-img2">
                <img src="img/top-img/t10.png" alt="" />
              </div>
              <div class="li-txt">
                <span>百科</span>
              </div>
            </a>
          </li>
          <li>
            <a href="tel:13839426625">
              <div class="li-img2">
                <img src="img/top-img/t11.png" alt="" />
              </div>
              <div class="li-txt">
                <span>客服电话</span>
              </div>
            </a>
          </li>
        </ul>
        <ul class="home-ul">
          <li>
            <a href="fangdaijisuan_hjx.html">
              <div class="li-img2">
                <img src="img/top-img/tj.png" alt="" />
              </div>
              <div class="li-txt">
                <span>房贷计算</span>
              </div>
            </a>
          </li>
          <li>
            <a href="zuidishoufu.html">
              <div class="li-img2">
                <img src="img/top-img/ts.png" alt="" />
              </div>
              <div class="li-txt">
                <span>最低首付</span>
              </div>
            </a>
          </li>
          <li>
            <a href="goufangzizhi.html">
              <div class="li-img2">
                <img src="img/top-img/tg.png" alt="" />
              </div>
              <div class="li-txt">
                <span>购房资质</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <!-- 二手房 -->
      <div class="home-house-card-more">
        <div class="cont">
          <div class="header">
            <span class="title">二手房·全城必看好房</span>
            <a href="ershoufang_lcz.html" class="more">
              更多二手房
              <i class="link"></i>
            </a>
          </div>
          <div class="card-list" id="house_se"></div>
        </div>
      </div>
      <!-- 新房 -->
      <div class="home-house-card-more">
        <div class="cont">
          <div class="header">
            <span class="title">新房·本周热门好盘</span>
            <a href="xinfang_lcz.html" class="more">
              更多在售楼盘
              <i class="link"></i>
            </a>
          </div>
          <div class="card-list" id="house_new"></div>
        </div>
      </div>
      <!-- 二手房推荐 -->
      <div class="home-house-card-more">
        <div class="cont">
          <div class="header">
            <span class="title">为您推荐二手房</span>
          </div>
          <div class="list second">
            <a href="#" class="item sec-item0">
              <p class="title">低价捡漏榜</p>
              <p class="sub-title">高性价比房</p>
            </a>
            <a href="#" class="item sec-item1">
              <p class="title">抢手房源榜</p>
              <p class="sub-title">大家都在看</p>
            </a>
            <a href="#" class="item sec-item2">
              <p class="title">新上热门榜</p>
              <p class="sub-title">抢先看好房</p>
            </a>
          </div>
        </div>
      </div>
      <!-- 二手房信息 -->
      <div class="home-second-house-card-list">
        <div class="list" id="house_sec"></div>
      </div>
      <!-- app内获取更多 -->
      <div>
        <a href="#" class="home-more-btn">APP内获取更多</a>
      </div>
      <!-- 新房推荐 -->
      <div class="home-house-card-more">
        <div class="cont">
          <div class="header">
            <span class="title">为您推荐新房</span>
          </div>
          <div class="list second hn">
            <a href="#" class="item sec-item4">
              <p class="title">刚需必看</p>
              <p class="sub-title">低价好户型</p>
            </a>
            <a href="#" class="item sec-item5">
              <p class="title">交通配套</p>
              <p class="sub-title">去哪儿都方便</p>
            </a>
            <a href="#" class="item sec-item6">
              <p class="title">新开好盘</p>
              <p class="sub-title">品牌好房抢先看</p>
            </a>
          </div>
        </div>
      </div>
      <!-- 新房信息 -->
      <div class="home-second-house-card-list">
        <div class="list" id="house_new_rec"></div>
      </div>
      <!-- app内获取更多 -->
      <div>
        <a href="#" class="home-more-btn">APP内获取更多</a>
      </div>
      <!-- 租房推荐 -->
      <div class="home-house-card-more">
        <div class="cont">
          <div class="header">
            <span class="title">为您推荐租房</span>
          </div>
        </div>
      </div>
      <!-- 租房信息 -->
      <div class="home-second-house-card-list">
        <div class="list" id="house_rent_rec"></div>
      </div>
      <!-- app内获取更多 -->
      <div>
        <a href="#" class="home-more-btn">APP内获取更多</a>
      </div>
      <!-- 登录 -->
      <div class="kem__im-icon">
        <a class="im-icon" href="login_wzt.html"></a>
      </div>
      <div class="kem__user-icon">
        <a class="user-icon" href="user_wzt.html"></a>
      </div>

      <!-- 底部 -->
      <div class="kem__footer">
        <div class="footer-breadcrumb">
          快捷找房合肥站
          <span>|</span>
          营业执照
          <span>|</span>
          ICP证
        </div>
        <div class="footer-nav">
          <div class="link-tit">
            <h3 class="tit active" id="ho_tp">二手房</h3>
            <h3 class="tit" id="ho_tpl">小区</h3>
          </div>
          <div class="link-cont">
            <ul class="cont co1">
              <li><a href="#">泰安二手房</a></li>
              <li><a href="#">黄冈二手房</a></li>
              <li><a href="#">宁波二手房</a></li>
              <li><a href="#">浏阳二手房</a></li>
              <li><a href="#">乌鲁木齐二手房</a></li>
              <li><a href="#">重庆二手房</a></li>
              <li><a href="#">阜阳二手房</a></li>
              <li><a href="#">郑州二手房</a></li>
              <li><a href="#">运城二手房</a></li>
              <li><a href="#">常州二手房</a></li>
              <li><a href="#">北京二手房</a></li>
              <li><a href="#">济宁二手房</a></li>
            </ul>
            <ul class="cont co2">
              <li><a href="#">泰安小区</a></li>
              <li><a href="#">黄冈小区</a></li>
              <li><a href="#">宁波小区</a></li>
              <li><a href="#">浏阳小区</a></li>
              <li><a href="#">乌鲁木齐小区</a></li>
              <li><a href="#">重庆小区</a></li>
              <li><a href="#">阜阳小区</a></li>
              <li><a href="#">郑州小区</a></li>
              <li><a href="#">运城小区</a></li>
              <li><a href="#">常州小区</a></li>
              <li><a href="#">北京小区</a></li>
              <li><a href="#">济宁小区</a></li>
            </ul>
          </div>
        </div>
        <div class="bottom-info ke">
          <div class="icon-box">
            <span class="icon-iphone">iPhone客户端</span>
            <span class="icon-android">Android客户端</span>
          </div>
          <div class="copyright">
            <u class="record">投资者关系/Investors</u>
            <p class="record">网上有害信息举报专区</p>
            <p class="company">天津小屋信息科技有限公司</p>
            <p class="record">
              地址：天津经济技术开发区南港工业区综合服务区办公楼
            </p>
            <p class="record">C座一层112室09单元</p>
            <p class="record">电话:10106188</p>
            <p class="record">网络经营许可证</p>
            <p class="record">津ICP备18000836号</p>
            <p class="record">网络文化经营许可证 津网文（2017）2063-011号</p>
            <p class="record">ICP经营许可证 津B2-20170026</p>
            <p class="record">copyright©2021&nbsp;ke.com&nbsp;版权所有</p>
            <p class="record">
              <a
                href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12019002000223"
                ><img src="img/foot/f2.png" alt="" style="width: 0.2rem" />
                津公网安备 12019002000223号</a
              >
            </p>
          </div>
        </div>
      </div>
    </div>
    <script>
      //自适应字体大小
      (function () {
        function w() {
          var all = document.documentElement;
          var test = all.getBoundingClientRect().width;
          rem = test / 7.5;
          all.style.fontSize = rem + "px";
        }
        w();
        window.addEventListener(
          "resize",
          function () {
            w();
          },
          false
        );
      })();
      // 渲染页面商品
      $.ajax({
        type: "get",
        url: "http://localhost:3033/xinfang",
        data: {},
        success: function (result) {
          let res = result;
          let count = [
            "slider1",
            "slider2",
            "slider3",
            "slider4",
            "slider5",
            "slider6",
            "slider7",
            "slider8",
          ];
          console.log(count);
          console.log(res);
          for (var i = 0; i < 3; i++) {
            //新房数据渲染res
            $("#house_new").append(`
                        <a href="er-details.html?id=${
                          res[i + 3].id
                        }" class="card-item">
                            <div class="img-wrap">
                                <span class="area-tag">${
                                  res[i + 3].title
                                }</span>
                                <img src="./img/${
                                  count[i + 5]
                                }.jpg" class="img" alt="">
                            </div>
                            <div class="card-title">${res[i].keywords}</div>
                            <div class="focus">${res[i].plcae1}</div>
                            <div class="price">${res[i].unit}</div>
                        </a>
                    `);
            // 新房推荐渲染
            $("#house_new_rec").append(`
                        <a href="er-details.html?id=${res[i].id}" class="item">
                            <div class="img-wrap">
                                <img src="./img/${count[i]}.jpg" alt="" class="img">
                            </div>
                            <div class="detail">
                                <p class="title more-row">${res[i].describe}/${res[i].keywords}</p>
                                <p class="info">${res[i].title}</p>
                                <p class="location">${res[i].plcae}/${res[i].plcae1}/${res[i].plcae2}</p>
                                <div class="tags">
                                    <span class="tag" style="background-color: rgb(244, 247, 249); color: rgb(132, 154, 174);">视频看房</span>
                                    <span class="tag" style="background-color: rgb(244, 247, 249); color: rgb(132, 154, 174);">小户型</span>
                                </div>
                                <div class="price">
                                    <span class="totals">${res[i].count}㎡</span>
                                    <span class="unit"> ${res[i].lable}</span>
                                </div>
                            </div>
                        </a>    
                    `);
          }
        },
      });
      // 租房推荐渲染
      $.ajax({
        type: "get",
        url: "http://localhost:3033/zufang",
        data: {},
        success: function (result) {
          let res = result;
          let count = [
            "slider1",
            "slider2",
            "slider3",
            "slider4",
            "slider5",
            "slider6",
            "slider7",
            "slider8",
          ];
          console.log(count);
          console.log(res);
          for (var i = 0; i < 3; i++) {
            $("#house_rent_rec").append(`
                        <a href="er-details.html?id=${res[i].id}" class="item">
                            <div class="img-wrap">
                                <img src="./img/${
                                  count[i + 2]
                                }.jpg" alt="" class="img">
                            </div>
                            <div class="detail">
                                <p class="title more-row">${res[i].title}</p>
                                <p class="location">${res[i].container}</p>
                                <div class="tags">
                                    <span class="tag" style="background-color: rgb(244, 247, 249); color: rgb(132, 154, 174);">官方核验</span>
                                    <span class="tag" style="background-color: rgb(244, 247, 249); color: rgb(132, 154, 174);">随时看房</span>
                                </div>
                                <div class="price">
                                    <span class="totals">${
                                      res[i].container2
                                    }</span>
                                </div>
                            </div>
                        </a>
                    `);
          }
        },
      });
      // 二手房渲染
      $.ajax({
        type: "get",
        url: "http://localhost:3033/ershoufangindex",
        data: {},
        success: function (result) {
          let res = result;
          let count = [
            "slider1",
            "slider2",
            "slider3",
            "slider4",
            "slider5",
            "slider6",
            "slider7",
            "slider8",
          ];
          console.log(count);
          for (var i = 0; i < 3; i++) {
            // 必看二手房
            $("#house_se").append(`
                        <a href="er-details.html?id=${res[i].title}" class="card-item">
                            <div class="img-wrap">
                                 <img src="./img/${count[i]}.jpg" alt="" class="img">
                            </div>
                            <div class="card-title">${res[i].describe}</div>
                            <div class="focus">5人关注此房</div>
                            <div class="price">${res[i].allprice}</div>
                        </a>
                    `);
            console.log(count[i] + ".jpg");
            // 二手房推荐渲染
            $("#house_sec").append(`
                        <a href="er-details.html?id=${res[i].id}" class="item">
                        <div class="img-wrap">
                            <img src="./img/${
                              count[i + 3]
                            }.jpg" alt="" class="img">
                        </div>
                        <div class="detail">
                            <p class="title more-row">${res[i].title}</p>
                            <p class="info">${res[i].describe}</p>
                            <div class="tags">
                                <span class="tag" style="background-color: rgb(244, 247, 249); color: rgb(132, 154, 174);">${
                                  res[i].keywords
                                }</span>
                                <span class="tag" style="background-color: rgb(244, 247, 249); color: rgb(132, 154, 174);">地铁</span>
                            </div>
                            <div class="price">
                                <span class="total">${
                                  res[i].allprice
                                } <span class="total-unit"></span></span>
                                <span class="unit">${res[i].price}</span>
                            </div>
                        </div>
                    </a>
                    `);
          }
        },
      });
      // 底部tap切换
      $("#ho_tp").click(() => {
        if ($("#ho_tp").hasClass("active")) {
        } else {
          $(".co1").show();
          $(".co2").hide();
          $("#ho_tp").addClass("active");
          $("#ho_tpl").removeClass("active");
        }
      });
      $("#ho_tpl").click(() => {
        if ($("#ho_tpl").hasClass("active")) {
        } else {
          $(".co2").show();
          $(".co1").hide();
          $("#ho_tp").removeClass("active");
          $("#ho_tpl").addClass("active");
        }
      });
      // 用户本地存储
      var na = decodeURI(window.location.search.split("=")[1]);
      if (na == "undefined") {
      } else {
        sessionStorage.name = na;
      }
      // 城市改变
      $("#city").click(() => {
        window.location.href = "city.html";
      });
      if (sessionStorage.city) {
        $("#city").html(sessionStorage.city + "<span class='arrow'></span>");
      } else {
        $("#city").html("合肥<span class='arrow'></span>");
      }
    </script>
  </body>
</html>
